<template>
  <div class="tbox">
    <div class="title">
      <span
        ><a v-if="state.type !== 1" @click="back"
          ><rollback-outlined /> 返回</a
        ></span
      >
      <div v-if="state.type !== 5">{{ repair?.shipName }}碳排放统计</div>
<div v-else>坞内用水量统计</div>
      <a-space>
        <a v-if="![3, 4,5].includes(state.type)" @click="exportExcel"><file-excel-outlined /> 导出</a>
        <a v-if="![3, 4,5].includes(state.type)" @click="next"
          ><exclamation-circle-outlined /> 详情</a
        >
        <a v-if="![3, 4,5].includes(state.type)" @click="openWater"><file-excel-outlined /> 水耗</a>
      </a-space>
    </div>
    <div class="page">
      <water v-if="state.type===5" :repair="repair" ref="pageRef"/>
      <emission v-if="state.type === 1" :repair="repair" ref="pageRef" />
      <room v-if="state.type === 2" :repair="repair" ref="pageRef" />
      <flow
        v-if="state.type === 3"
        :repair="repair"
        @onFlowChange="
          (v) => {
            state.flow = v;
            state.type = 4;
          }
        "
        ref="pageRef"
      />
      <info
        v-if="state.type === 4 && state.flow"
        :repair="repair"
        :flow="state.flow"
      />
    </div>
  </div>
</template>
<script setup>
import emission from "./emission.vue";
import room from "./room.vue";
import flow from "./flow.vue";
import info from "./info.vue";
import water from "./water.vue";
import { reactive, watch, ref } from "vue";
import _ from "lodash";

// 根据类型显示不同维度的船舶单船工序统计：1.能源维度，2.车间维度，3.工序维度, 4.工序详情
const props = defineProps(["type", "repair"]);
const state = reactive({ type: 1, flow: null ,waterType: false});
const pageRef = ref();

watch(
  () => props.type,
  (type) => {
    state.type = type;
  }
);

const openWater = () => {
  console.log(water); // 应输出组件对象
  //state.waterType = true;
  state.type = 5
  console.log("state.type",state.waterType)
}

const back = () => {
  const current = state.type;
  state.type = _.clamp(current - 1, 1, 4);
};

const next = () => {
  const current = state.type;
  state.type = _.clamp(current + 1, 1, 4);
};

const exportExcel = () => {
  pageRef.value.exportExcel();
};
</script>
<style lang="less" scoped>
.tbox {
  width: 100%;
  height: 100%;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: large;
    padding: 8px 4px;

    a {
      font-size: 16px;
    }
  }

  .page {
    height: calc(100% - 44.28px);
    padding: 4px;
  }
}
</style>
